<template>
  <div class="common-layout">
    <!-- title query -->
    <title-section
      :titleName="'订单进度'"
      :queryPlaceholder="'生产计划编码'"
      @query-change="queryChange"
    >
      <template #queryCom>
        <el-input
          v-model="form.InventoryCode"
          clearable
          style="width: 150px; margin-left: 10px"
          placeholder="存货编码"
        />
        <el-input
          v-model="form.InventoryName"
          clearable
          style="width: 150px; margin-left: 10px"
          placeholder="存货名称"
        />
      </template>
    </title-section>
    <!-- table -->
    <div class="table-info mes-table">
      <data-table ref="dataTableRef" :tableKey="tableKey" :isSelection="false">
        <template #productPlanCode="{ row }">
          <el-link type="primary" @click="detailChange(row)">{{ row.productPlanCode || "--" }}</el-link>
        </template>
        <template #progress="{ row }">
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="row.progress"
          />
        </template>
      </data-table>
      <!-- 分页 -->
      <div class="table-pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :page-sizes="[15, 30, 50, 80, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <!-- 详情 -->
  <dialog-com
    ref="dialogComRef"
    :title="'订单进度详情'"
    :width="'80%'"
    :isShowConfirmBtn="false"
    @close-change="closeChange"
  >
    <template #content>
        <div class="grid-box">
            <div v-for="item in itemArr.filter(item => !item.hidden)" :key="item.label" class="item">
                <span :style="{ 'min-width': item.width || '70px' }"> {{ item.label }}： </span>
                <span>
                {{ !detailInfo[item.value] && detailInfo[item.value]!==0 ? '--' : detailInfo[item.value] }}
                </span>
            </div>
        </div>
        <data-table
          ref="dialogDataRef"
          :tableKey="detailTableKey"
          :isSelection="false"
          style="margin-top: 10px;"
        >
          <template #yieldRate="{ row }">{{ row.yieldRate }}%</template>
        </data-table>
    </template>
  </dialog-com>
</template>

<script>
import {
  getOrderProgressList,
  getOrderProgressDetailInfo
} from "@/api/reportManagement/orderProgress.js";
export default {
  components: {},
  data() {
    return {
      tableLoading: false,
      currentPage: 1,
      pageSize: 15,
      totalPage: 0,
      tableKey: [
        {
          value: "productPlanCode",
          name: "生产计划编码",
          minWidth: "180",
          sortable: false,
          slot: true,
        },
        { value: "inventoryCode", name: "存货编码", minWidth: "180" },
        { value: "inventoryName", name: "存货名称", minWidth: "180" },
        {
          value: "specificationModel",
          name: "规格型号",
          minWidth: "180",
        },
        {
          value: "unitName",
          name: "单位名称",
          minWidth: "140",
        },
        {
          value: "qty",
          name: "计划数",
          minWidth: "100",
          algin: "center",
        },
        {
          value: "finishQty",
          name: "完工数",
          minWidth: "100",
          algin: "center",
        },
        {
          value: "progress",
          name: "进度",
          minWidth: "150",
          slot: true,
          algin: "center",
        },
        {
          value: "planStartDate",
          name: "计划开始时间",
          minWidth: "160",
        },
        {
          value: "planEndDate",
          name: "计划结束时间",
          minWidth: "160",
        },
      ],
      form: {},
      detailInfo: {},
      itemArr: [
        { value: 'productPlanCode', label: '生产计划编码', width: '100px'},
        { value: 'inventoryCode', label: '存货编码'},
        { value: 'inventoryName', label: '存货名称'},
        { value: 'specificationModel', label: '规格型号'},
        { value: 'unitName', label: '单位名称'},
        { value: 'qty', label: '计划数', width: '60px'},
        { value: 'finishQty', label: '完工数', width: '60px'}
      ],
      detailTableKey: [
        {
          value: "processName",
          name: "工序名称",
          minWidth: "180",
        },
        {
          value: "reportQty",
          name: "报工数",
          minWidth: "100",
          algin: "center",
        },
        {
          value: "goodQty",
          name: "良品数",
          minWidth: "100",
          algin: "center",
        },
        {
          value: "noGoodQty",
          name: "不良品数",
          minWidth: "100",
          algin: "center",
        },
        {
          value: "yieldRate",
          name: "良品率",
          minWidth: "150",
          slot: true,
          algin: "center",
        },
        {
          value: "reoportDurationHour",
          name: "报工小时",
          minWidth: "100",
          algin: "center",
        },
        {
          value: "reoportDurationMinute",
          name: "报工分钟",
          minWidth: "100",
          algin: "center",
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.getTableData();
  },
  methods: {
    // 切换条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getTableData();
    },
    // 切换页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    // 点击查询操作
    queryChange(val) {
      this.form = Object.assign(this.form, val);
      this.currentPage = 1;
      this.getTableData();
    },
    // 重置查询数据
    resetPage() {
      this.pageSize = 15;
      this.currentPage = 1;
      this.totalPage = 0;
      this.$refs.dataTableRef.tableData = [];
      this.form = {};
    },
    // 获取列表数据
    async getTableData() {
      this.$refs.dataTableRef.tableLoading = true;
      try {
        const { WorkOrderCode, InventoryCode, InventoryName } = this.form;
        const params = {
          ProductPlanCode: WorkOrderCode || "", // 生产计划编码
          InventoryCode: InventoryCode || "", // 存货编码
          InventoryName: InventoryName || "", // 存货名称
          rows: this.pageSize,
          page: this.currentPage,
        };
        const res = await getOrderProgressList(params);
        if (res.status === 0) {
          this.$refs.dataTableRef.tableData = res.rows&&res.rows.length>0 ? (res.rows.map(item=>{
            return {
                ...item,
                // 进度=完工数/计划数
                progress: item.finishQty ? (Math.floor(item.finishQty / item.qty * 100)) : 0
            }
          })) : [];
          this.totalPage = res.total || 0;
        } else {
          this.$refs.dataTableRef.tableData = [];
          this.totalPage = 0;
          this.$message.error(res.msg || "查询失败");
        }
        this.$refs.dataTableRef.tableLoading = false;
      } catch (err) {
        this.$message.error(err.msg || "查询失败");
        this.$refs.dataTableRef.tableLoading = false;
      }
    },
    // 查看详情
    async detailChange(val) {
        this.detailInfo = JSON.parse(JSON.stringify(val))
        this.$refs.dialogComRef.dialogVisible = true;
         try {
            this.$refs.dialogComRef.loading = true;
            const params = {
                id: val.productPlan_Id || "", // 生产计划ID
            };
            const res = await getOrderProgressDetailInfo(params);
            if (res.ok) {
                this.$refs.dialogDataRef.tableData = res.data&&res.data.length>0 ? (res.data.map(item=>{
                    return {
                        ...item,
                        // 良品率=良品数/完工数
                        yieldRate: item.reportQty ? (item.noGoodQty ? (Math.floor(item.goodQty / item.reportQty * 100)) : 100) : '--'
                    }
                })) : [];
            } else {
                this.$refs.dialogDataRef.tableData = [];
                this.$message.error((res.err&&res.err.msg) || "查询失败");
            }
            this.$refs.dialogComRef.loading = false;
        } catch (err) {
            this.$message.error((err.err&&err.err.msg) || "查询失败");
            this.$refs.dialogComRef.loading = false;
            this.$refs.dialogDataRef.tableData = [];
        }
    },
    closeChange() {
        this.detailInfo = {};
    }
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/css/index.less";
.grid-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  .item {
    margin: 0 0 10px;
    line-height: 21px;
    font-size: 14px;
    font-weight: 400;
    color: #646566;
    display: flex;
    justify-content: flex-start;
    & > span {
      display: inline-block;
      min-width: 70px;
    }
    span:nth-of-type(2) {
      color: #323233;
      margin-right: 10px;
    }
    &:last-child {
      margin: 0;
    }
  }
}
</style>
